<template>
  <h1>单选组件</h1>
  <!-- value保存单个选项被选中时提交的值 label设置当前选项显示的文字
 一旦选择了某个选项,就会把该选项的value值保存到双向绑定的变量edu中 -->
  <el-radio-group v-model="edu">
    <!--  设置按钮点击 被点击时会选择该选项  -->
    <el-radio value="初中" label="学历:初中"></el-radio>
    <el-radio value="高中" label="学历:高中"></el-radio>
    <el-radio value="本科" label="学历:本科"></el-radio>
    <el-radio value="硕士">学历:硕士</el-radio>
  </el-radio-group>
  <!-- 点击按钮后显示选择的内容 -->
  <h4>您选择的是:{{edu}}</h4>
  <hr>
  <!-- 通过 v-model 指令绑定到数据属性 pri 上，用于双向数据绑定 -->
  <el-radio-group v-model="pri">
    <!--  这是一个循环遍历数组 arr 的部分。对于数组中的每一个元素 p，都会生成一个单选按钮。
每个单选按钮的 label 属性设置为 p.title，表示显示的文本，而 value 属性设置为 p.price，表示该单选按钮对应的值。  -->
    <el-radio-button v-for="p in arr" :label="p.title" :value="p.price"></el-radio-button>
  </el-radio-group>
  <!-- 点击按钮后显示选择的内容的价格 -->
  <h4>您选择的价格是:{{pri}}</h4>
</template>

<script setup>
import {ref} from "vue";
const edu = ref("");
const arr = ref([
  {title:"五粮液",price:500},
  {title:"茅台",price:2500},
  {title:"梦之蓝",price:368},
  {title:"汾酒",price:330}
]);
//创建了一个名为 pri 的响应式引用，并将其初始值设为 330。这意味着在您的 Vue 组件中，pri 的值默认为 330。
//在进入页面的时候会优先显示 330 的内容。

//定义一个变量用来保存酒的价格
const pri = ref(2500);
</script>

<style scoped>

</style>